import React, { useState, useEffect } from "react";
import "./index.css";
import { getAccountinfo, uploagavatar } from "../../api/account";
import {
  useNavigate,
  useLocation,
  useMatch,
  useMatches,
} from "react-router-dom";
// 导入获取数据的hooks  react-redux
import { useSelector } from "react-redux";
import { Form, Input, Button, Select, InputNumber, Upload } from "antd";
// import { PlusOutlined } from '@ant-design/icons';
import Home from "../../pages/Home";
import { Outlet } from "react-router-dom";
import MyIconfont from "../MyIconfont";

import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
  AppstoreOutlined,
} from "@ant-design/icons";
import { Breadcrumb, Layout, Menu, theme } from "antd";
const { Header, Content, Footer, Sider } = Layout;
export default function LeftNav() {
  // 同步图片
  const { userImg } = useSelector((storage) => storage.userSlice);
  // 这是用户信息
  const [userInfo, setUserInfo] = useState({});
  useEffect(() => {
    let { id } = JSON.parse(localStorage.getItem("user"));
    getAccountinfo({ id: id }).then((res) => {
      setUserInfo(res.data);
      console.log(res.data);
    });
  }, []);
  // 这是面包屑导航
  const breadList = [
    {
      title: <span onClick={() => toPage("/home")}>首页</span>,
    },
  ];
  const navigate = useNavigate();
  const matches = useMatches();
  const matches1 = matches.filter((item) => item.data && item.data.title);
  matches1.forEach((item) => {
    breadList.push({
      title: (
        <span onClick={() => toPage(item.pathname)}>{item.data.title}</span>
      ),
    });
  });
  const toPage = (path) => {
    navigate(path);
  };
  const menuList = [
    {
      key: "/home",
      label: "首页",
      icon: <MyIconfont font="icon-home" size="20px" />,
    },
    {
      key: "/account1",
      label: "账号管理",
      icon: <MyIconfont font="icon-account" size="20px" />,
      children: [
        { key: "/account", label: "账号列表" },
        { key: "/account/add", label: "添加账号" },
        { key: "/account/usercenter", label: "个人中心" },
        { key: "/account/update", label: "修改密码" },
      ],
    },
    {
      key: "/goods1",
      label: "商品管理",
      icon: <MyIconfont font="icon-good" size="20px" />,
      children: [
        { key: "/goods", label: "商品列表" },
        { key: "/goods/goodsadd", label: "商品添加" },
        { key: "/goods/goodssort", label: "商品分类" },
      ],
    },
    {
      key: "/order",
      label: "订单管理",
      icon: <MyIconfont font="icon-order" size="20px" />,
    },
    {
      key: "/store",
      label: "店铺管理",
      icon: <MyIconfont font="icon-store" size="20px" />,
    },
    {
      key: "/saleslist1",
      label: "统计数据",
      icon: <MyIconfont font="icon-data" size="20px" />,
      children: [
        { key: "/saleslist", label: "商品统计" },
        { key: "/saleslist/form", label: "订单统计" },
      ],
    },
  ];
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  const menuStyle = {
    backgroundColor: "rgb(48, 65, 86)",
    color: "white", // 在这里更改字体颜色
  };

  const changeMenu = (menu) => {
    console.log(menu);
    navigate(menu.key);
  };
  // // 处理当前寻中的菜单
  const [openKey, setOpenKey] = useState(["/account1"]);
  const [selectKey, setSelectKey] = useState(["/home"]);
  const openChage = (data) => {
    setOpenKey(data);
  };
  //面包屑和菜单相互影响
  useEffect(() => {
    // 拿到第0个元素：父路由信息 data.key  设置展开项
    let key = matches[0].data.key;
    setOpenKey([key]);
    // 拿到最后一个元素：当前子路由信息
    let currentKey = matches[matches.length - 1].data.key;
    console.log(currentKey);
    setSelectKey(currentKey);
  }, [matches]);

  return (
    <Layout
      style={{
        minHeight: "100vh",
      }}
    >
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
      >
        <div className="demo-logo-vertical"></div>

        <Menu
          onOpenChange={openChage}
          openKeys={openKey}
          selectedKeys={selectKey}
          theme="dark"
          defaultSelectedKeys={["1"]}
          mode="inline"
          items={menuList}
          style={{
            margin: "0",
          }}
          onClick={changeMenu}
        />
      </Sider>
      <Layout>
        <Header
          style={{
            padding: 0,
            margin: 0,
            background: colorBgContainer,
          }}
        >
          <div className="sumsize">
            <div className="l">
              <select name="" id="">
                <option value="欢迎登录">欢迎登录</option>
                <option value="个人中心">个人中心</option>
                <option value="退出登录">退出登录</option>
              </select>
            </div>
            <div className="r">
              {userInfo && userInfo.accountInfo && (
                <label htmlFor="upload" className="upload-button">
                  <input
                    type="file"
                    id="upload"
                    style={{ display: "none" }}
                    // onChange={handleFileChange}
                  />

                  {/* <img
                    className="Img"
                    src={
                      "http://8.137.157.16:9002" + userInfo.accountInfo.imgUrl
                    }
                    alt=""
                  
                  /> */}

                  <img className="Img" src={userImg?userImg:"http://8.137.157.16:9002" + userInfo.accountInfo.imgUrl} alt="" />
                </label>
              )}
            </div>
          </div>
        </Header>
        <Content
          style={{
            margin: "16px",
            // textAlign: 'center',
          }}
        >
          <Breadcrumb items={breadList} />

          <div
            style={{
              padding: 14,
              minHeight: 640,
              maxHeight: 640,
              overflow: "scroll",
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet></Outlet>
          </div>
        </Content>
        <Footer
          style={{
            textAlign: "center",
          }}
        ></Footer>
      </Layout>
    </Layout>
  );
}
